<template>
  <el-form label-width="150px" :model="queryFrom">
    <!-- 赛事报名信息 -->
    <el-row>
      <el-col :span="12">
        <h3>基础信息</h3>
        <el-form-item v-for="item in arr" :key="item.id">
          <el-input v-model="item.name" placeholder="请输入信息" disabled />
          <el-select v-model="item.type" style="width: 600px" disabled>
            <el-option label="文本" value="0"></el-option>
            <el-option label="数字" value="1"></el-option>
            <el-option label="文件" value="2"></el-option>
            <el-option label="图片" value="3"></el-option>
          </el-select>
          <el-select v-model="item.status" style="width: 600px" disabled>
            <el-option label="必填" value="0"></el-option>
            <el-option label="非必填" value="1"></el-option>
          </el-select>
          <el-icon class="icon"></el-icon>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
    <el-row>
      <el-col :span="12">
        <h3>补充信息</h3>
        <h4>参赛人员信息</h4>
        <el-form-item v-for="item in list" :key="item.id">
          <el-input v-model="item.name" placeholder="请输入信息" />
          <el-select
            v-model="item.type"
            style="width: 600px"
            @change="selectFN(item)"
          >
            <el-option label="文本" value="0"></el-option>
            <el-option label="数字" value="1"></el-option>
            <el-option label="文件" value="2"></el-option>
            <el-option label="图片" value="3"></el-option>
            <el-option
              aria-readonly="true"
              label="下拉框"
              value="4"
            ></el-option>
          </el-select>
          <el-select v-model="item.status" style="width: 600px">
            <el-option label="必填" value="0"></el-option>
            <el-option label="非必填" value="1"></el-option>
          </el-select>
          <el-icon class="icon"
            ><Edit @click="dblclick(item,list)" v-if="item.type == 4" :size="100"
          /></el-icon>
          <el-icon class="icon"
            ><Close :size="100" @click="delFN(item.id,list)"
          /></el-icon>
        </el-form-item>
        <el-button @click="addList(list)" type="primary" plain>添加字段</el-button>
        <h4>团队信息</h4>
        <el-form-item v-for="item in groupList" :key="item.id">
          <el-input v-model="item.name" placeholder="请输入信息" />
          <el-select
            v-model="item.type"
            style="width: 600px"
            @change="selectFN(item)"
          >
            <el-option label="文本" value="0"></el-option>
            <el-option label="数字" value="1"></el-option>
            <el-option label="文件" value="2"></el-option>
            <el-option label="图片" value="3"></el-option>
            <el-option
              aria-readonly="true"
              label="下拉框"
              value="4"
            ></el-option>
          </el-select>
          <el-select v-model="item.status" style="width: 600px">
            <el-option label="必填" value="0"></el-option>
            <el-option label="非必填" value="1"></el-option>
          </el-select>
          <el-icon class="icon"
            ><Edit @click="dblclick(item)" v-if="item.type == 4" :size="100"
          /></el-icon>
          <el-icon class="icon"
            ><Close :size="100" @click="groupFN(item.id)"
          /></el-icon>
        </el-form-item>
        <el-button @click="addList(groupList)" type="primary" plain>添加字段</el-button>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-button type="primary" @click="lastStep">上一步</el-button>
      <el-button type="primary" @click="backToList">保存</el-button>
    </el-row>
  </el-form>

  <el-dialog
    v-model="DialogVisible"
    v-if="DialogVisible"
    title="下拉框"
    width="30%"
    center
    @close="close()"
  >
    <el-form ref="selectRef" :model="selectForm">
      <el-form-item v-for="val in select.option" :key="val.id">
        <el-input v-model="val.name" placeholder="请输入信息" />
        <el-icon class="icon"
          ><Close :size="50" @click="delSelect(val.id)"
        /></el-icon>
      </el-form-item>
      <el-row justify="end">
        <el-button
          @click="okSelect(select.option)"
          type="primary"
          style="margin-right: 30%"
          >确 定</el-button
        >
        <el-button @click="addSelect(select.option)" type="primary" plain>添加字段</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { getCurrentInstance } from "@vue/runtime-core";
import { customCompetition, editApi } from "@/api/match/league.js";
import { toRefs } from "@vueuse/shared";
const { proxy } = getCurrentInstance();
const route = useRouter();
const emit = defineEmits(["nextStep"]);
const DialogVisible = ref(false);
const id = ref();
const select=ref()
const arr = ref([
  {
    id: 1,
    name: "姓名",
    type: "0",
    status: "0",
  },
  {
    id: 2,
    name: "证件类型",
    type: "0",
    status: "0",
  },
  {
    id: 3,
    name: "证件号",
    type: "0",
    status: "0",
  },
  {
    id: 4,
    name: "国籍",
    type: "0",
    status: "0",
  },
  {
    id: 5,
    name: "民族",
    type: "0",
    status: "0",
  },
]);
const list = ref([]);
const groupList=ref([])
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  up: {},
});
console.log(props.up);
const selectList = ref([]);
const flag = ref(false);
const data = reactive({
  form: {},
  rules: {
    venueName: { required: true, message: "请输入场馆名称", trigger: "blur" },
    managerTelno: {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
    businessStart: {
      required: true,
      message: "请输入营业时间",
      trigger: "blur",
    },
    businessEnd: { required: true, message: "请输入闭店时间", trigger: "blur" },
    commonCanCancel: { required: true, message: "请选择", trigger: "blur" },
    memberCanCancel: { required: true, message: "请选择", trigger: "blur" },
  },
});
const { rules, form } = toRefs(data);

if (props.id) {
  initData();
}
async function initData() {
  form.value.id = props.id;
  let res = await editApi(form.value);
  form.value = res.data;
  list.value = [];
  groupList.value = [];
  list.value = JSON.parse(form.value.participantsInfo);
  groupList.value = JSON.parse(form.value.groupInfo);
  if (form.value.participantsInfo == null) list.value = [];
  if (form.value.groupInfo == null) groupList.value = [];
}

// 保存
function submitForm() {
  // if (flag.value) return;
  return new Promise(async (resolve, reject) => {
    form.value.id = props.id;
    console.log(list.value);
    console.log(groupList.value);
    form.value.participantsInfo = JSON.stringify(list.value);
    form.value.groupInfo = JSON.stringify(groupList.value);
    let res = await customCompetition(form.value);
    if (res.code == 200) {
      proxy.$modal.msgSuccess("保存成功过！");
      flag.value = true;
      id.value = res.data;
    } else { 
      proxy.$modal.msgError("操作失败");
    }
    if (flag.value) {
      resolve("成功");
    } else {
      reject("失败");
    }
  });
}

// 添加字段
function addList(list) {
  let cid = new Date().getTime();
  list.push({
    name: "",
    id: cid,
    type: "0",
    status: "0",
    option: [{ id: 1, name: "" }],
  });
}

function addSelect(list) {
  let cid = new Date().getTime();
  list.push({
    id: cid,
    name: "",
  });
}

function okSelect(list) {
  list = list.filter((item) => {
    return item.name != "";
  });
  console.log(list);
  DialogVisible.value = false;
}

function selectFN(e) {
  if (e.type == 4) {
    DialogVisible.value = true;
    select.value = e;
  }
}

function dblclick(e) {
  if (e.type == 4) {
    DialogVisible.value = true;
    select.value = e;
    if(e.option.length>1) select.value.option = select.value.option.filter(item=>{return item.name!=''});
    console.log(select.value);
  }
}

// 对话框关闭
function close(list) {
  select.value.option = select.value.option.filter((item) => {
    return item.name != '';
  });
  console.log(select.value.option);
}

// 删除字段
function delFN(id) {
  list.value = list.value.filter((item) => item.id !== id);
}
function groupFN(id) {
  groupList.value = groupList.value.filter((item) => item.id !== id);
}


function delSelect(id) {
  select.value.option = select.value.option.filter((item) => item.id !== id);
}

// 下一步
async function backToList() {
  if (flag.value) {
    route.go(-1);
  } else {
    await submitForm();
    if (flag.value)
      route.push({
        path: "/match/mlist",
      });
  }
}

// 上一步
async function lastStep() {
  if (flag.value) {
    emit("nextStep", 2, id.value);
  } else {
    await submitForm();
    if (flag.value) emit("nextStep", 2, id.value);
  }
}
</script>

<style scoped>
.tdFlex {
  display: flex;
}

.w50 {
  width: 50%;
}

.ml20 {
  margin-left: 20px;
}

:deep(.el-form-item__content) {
  display: flex;
  flex-wrap: nowrap;
  justify-items: space-between;
}
.icon {
  margin-left: 30px;
}
</style>
